<template>
  <div id="app" class="skLifeTable">
    <a-card :bordered="true">
      <!-- <a-row type="flex" justify="start">
        <a-col :sm="22" :xxl="22">
          <a-select
            default-value=""
            v-model="studentInfo.semesterId"
            class="class-select"
            style="width: 190px;"
            @change="getDataFrom()"
          >
            <a-select-option v-for="item in semesterList" :key="item.id" :value="item.id">
              {{ item.semesterName }}
            </a-select-option>
          </a-select>
        </a-col>
      </a-row> -->
      <div class="ant-card-head-wrapper">
        <div class="ant-card-head-title">
          <span class="subtitle" style="margin-bottom: 14px;">数据时间：{{dataDate}}</span>
        </div>
        <div class="ant-card-extra">
          <div class="left-circle-icon">
            <a-icon type="left-circle"  @click="closeTable" style="font-size: 22px;"/>
          </div>
        </div>
      </div>
      <a-row :gutter="[12, 28]">
        <a-col>
          <a-card>
            <div class="download-btn" style="width:100%;text-align: right;">
              <a-button type="primary" icon="download" @click="handleDownload" v-has="'health:sk_bmi_record:export'">导出</a-button>
            </div>
            <div class="student-info" id="studentInfo">
              <div class="chart-student">
                <p>班级：{{ studentInfo.className }}</p>
                <p>姓名：{{ studentInfo.studentName }}</p>
                <p>出生日期：{{ studentInfo.birthday }}</p>
              </div>
              <div ref="lineChart" :style="{backgroundImage: `url(${chartBg})`}" class="curve" id="curve"></div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script>
import skLifeStudentTable from "./skStudentTable.vue";
import { querySkSemester } from '@/api/management.js'
import { getAction } from '@/api/manage'
import html2canvas from "html2canvas" //网页转换为图片
import boy from "@/assets/boy.png";
import girl from "@/assets/girl.png";
export default {
  name: 'skStudent',
  data() {
    return {
      loading:false,
      dataDate: '',
      semesterList: [],
      dataSource: [],
      columns: [],
      url: {
        list: 'health/skBmiRecord/queryStudentBmiHistory'
      },
      studentList: [],
      chartBg:""
    }
  },
  props:{
    studentInfo: {
      type: Object,
      default: () => {}
    },
  },
  components: {
    skLifeStudentTable
  },

  filters: {},

  computed: {},
  activated() {
  },
  
  created () {
    this.dataDate = this.$skCommon.getDate(1);
    this.getSkSemester();
  },
  mounted() {
    this.load()
  },
  
  methods: {
    load() {
      // 查询列表数据
      const paramsTotal = {
        studentId: this.studentInfo.studentId,
      }
      const url = '/health/skBmiRecord/getBmiRecord'
      getAction(url, paramsTotal).then(res => {
        if(res.success) {
          this.studentInfo.className = res.result.className;
          this.studentInfo.birthday = res.result.birthday.substring(0,10);
          this.initLineChart(res.result);
        } else {
          this.$message.warning(res.message);
          this.loading = false;
        }
      })
    },
    // 关闭表格页面
    closeTable(){
      let data = {
        show:true
      }
      this.$emit("cardData",data);
    },
    // 获取参数
    getDataFrom(val){
      this.load();
    },
    initLineChart(data) {
      var myChartSports;
      var el = this.$refs.lineChart;
      if(this.$echarts.getInstanceByDom(el)) {
        myChartSports = this.$echarts.getInstanceByDom(el)
      }
      else{
        myChartSports = this.$echarts.init(el)
      }
      
      let HData = [],WData = [],XData = []
      data.bimData.forEach(item => {
        HData.push([item.age,item.height,item.dateTime]);
        WData.push([item.age,item.weight,item.dateTime]);
      });
      for (let i = 2; i <= 18; i+=0.25) {
        XData.push(i)
      }
      let top,HMax,WMax,color;
      if (data.sex == "1") {
          // 男
        top = 109
        HMax = 190,
        WMax =140,
        this.chartBg = boy;
        color = "rgb(247,6,58)"
      }else{
        // 女
        top = 171;
        HMax = 180,
        WMax =130
        this.chartBg = girl
        color = "rgb(19,56,220)"
      }
      let show = false;
      var option = {
        tooltip: {
          trigger: 'axis',
          formatter:function(params){
            var relName = "测量日期："+params[0].value[2];
            relName += '<br/>' + params[0].marker+"身高"+'：' + params[0].value[1] +" cm" + '<br/>'+ params[1].marker+"体重"+'：' + params[1].value[1] +" kg"
            return relName
          }
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data:XData,
            axisTick: {
              show: show // 不显示坐标轴刻度线
            },
            axisLine: {
              show: show // 不显示坐标轴线
            },
            axisLabel: {
              show: show // 不显示坐标轴上的文字
            },
            splitLine: {
              show: show // 不显示网格线
            }
          }
        ],
        grid: {
          top:top,
          bottom: 49,
          left: 80,
          right: 77
        },
        yAxis: [
          // 身高
          {
            type: "value",
            max: HMax, //最大值
            min: 50, //最小值
            interval: 10, //间隔
            axisTick: {
              show: show // 不显示坐标轴刻度线
            },
            axisLine: {
              show: show // 不显示坐标轴线
            },
            axisLabel: {
              show: show // 不显示坐标轴上的文字
            },
            splitLine: {
              show: show // 不显示网格线
            }
          },
          // 体重
          {
            type: "value",
            max: WMax, //最大值
            min: 0, //最小值
            interval: 10, //间隔
            axisTick: {
              show: show // 不显示坐标轴刻度线
            },
            axisLine: {
              show: show // 不显示坐标轴线
            },
            axisLabel: {
              show: show // 不显示坐标轴上的文字
            },
            splitLine: {
              show: show // 不显示网格线
            }
          }
        ],
        series: [
          // 身高
          {
            yAxisIndex: 0,
            data: HData,
            type: "line",
            smooth: true, //折线连线平滑
            showSymbol: HData.length > 1 ?false:true,
            color:color
          },
          // 体重
          {
            yAxisIndex: 1,
            data: WData,
            type: "line",
            smooth: true, //折线连线平滑
            showSymbol: WData.length > 1 ?false:true,
            color:color
          }
        ]
      };
      myChartSports.setOption(option);
      window.addEventListener("resize", ()=>{
        myChartSports.resize();
      })
    },
    handleDownload() {
      var that =  this;
      // 转换成canvas
      html2canvas(document.getElementById("curve")).then(function (canvas) {
        var img = canvas
          .toDataURL("image/png")
          .replace("image/png", "image/octet-stream");
        // 创建a标签，实现下载
        var creatIMg = document.createElement("a");
        creatIMg.download = that.studentInfo.className + "-"+  that.studentInfo.studentName + "身高、体重百分位曲线图.png"; // 设置下载的文件名，
        creatIMg.href = img; // 下载url
        document.body.appendChild(creatIMg);
        creatIMg.click();
        creatIMg.remove(); // 下载之后把创建的元素删除
      });
    },
    // 学期列表
    getSkSemester() {
      querySkSemester()
        .then(res => {
          if (res.success) {
            this.semesterList = res.result.records
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    },
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
@import '~@assets/less/skReport.less';
.chart-student{
  width: 720px;
  margin:0 auto;
  display: flex;
  justify-content: space-around;
  font-size: 20px;
}
.curve {
  width: 720px;
  margin:0 auto;
  height: 1000px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* background-size: contain;
	background-attachment: fixed; */
}
</style>
